<template>
  <div>
      <p>{{ msg }}</p>
      <button @click="change">点击修改数据</button>
      <h4>{{ info }}</h4>
      <p v-for=" item in odd" :key="item">{{ item }}</p>
      <h3>{{ comInfo }}</h3>
      <h2>{{ num }}</h2>
      <button @click="store.add(10)">点击++</button>
      <button @click="storeFun.changeInfo">点击修改info</button>
  </div>
</template>

<script setup>
import { storeToRefs } from 'pinia';
//引入设置的仓库
import { useStore } from '@/store';
import { useFun } from '@/store/fun';

//把创建的store实例化
let store = useStore();
let storeFun = useFun();

//从store中结构数据
let { msg,odd,num, } = storeToRefs(store);
let { info,comInfo,changeInfo } = storeToRefs(storeFun);
/*
使用 $patch 方法，可以进行批量修改数据
*/ 
let change = ()=>{
  store.$patch({
    msg:'凿壁偷光',
  });
};
</script>

<style lang="scss" scoped>


</style>